<template>
  <div class="背景">
    <!--页眉-->
    <div class="页眉"></div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <div class="文本框">
          <!--路由-->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>作品数据</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>
          <!--数据-->
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--整体数据-->
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">整体</span>
              <!--选择数据类型-->
              <el-row>
                <el-col :span="12">
                  <el-tabs v-model="activeName_2" @tab-click="handleClick" class="deleteBorder">
                    <el-tab-pane label="全部" name="1"></el-tab-pane>
                    <el-tab-pane label="文章" name="second"></el-tab-pane>
                    <el-tab-pane label="视频" name="third"></el-tab-pane>
                    <el-tab-pane label="富微条" name="forth"></el-tab-pane>
                  </el-tabs>
                </el-col>
                <el-col :span="12">
                  <div class="文本 右侧" style="padding-top: 9px;">
                    每日14点前更新前一日数据
                  </div>
                </el-col>
              </el-row>
              <!--核心数据-->
              <div class="文本-大">核心数据</div>
              <el-row :gutter="16" type="flex" justify="center">
                <el-col  :span="5">
                  <div class="文本框">
                    <div class="文本 居中">
                      昨日展现量
                    </div>
                    <div class="文本-巨型 居中">
                      6666
                    </div>
                    <div class="文本 居中">
                      粉丝展现量 6666
                    </div>
                  </div>
                </el-col>
                <el-col  :span="5">
                  <div class="文本框">
                    <div class="文本 居中">
                      昨日阅读/播放量
                    </div>
                    <div class="文本-巨型 居中">
                      6666
                    </div>
                    <div class="文本 居中">
                      粉丝阅读/播放量 6666
                    </div>
                  </div>
                </el-col>
                <el-col :span="5">
                  <div class="文本框">
                    <div class="文本 居中">
                      昨日点赞量
                    </div>
                    <div class="文本-巨型 居中">
                      6666
                    </div>
                    <div class="文本 居中">
                      粉丝点赞量 6666
                    </div>
                  </div>
                </el-col>
                <el-col  :span="5">
                  <div class="文本框">
                    <div class="文本 居中">
                      昨日评论量
                    </div>
                    <div class="文本-巨型 居中">
                      6666
                    </div>
                    <div class="文本 居中">
                      粉丝评论量 6666
                    </div>
                  </div>
                </el-col>
              </el-row>
              <!--流量分析-->
              <el-row>
                <!--文字-->
                <el-col :span="12">
                  <div class="文本-大" style="margin-top: 10px; margin-bottom: 20px;">流量分析</div>
                </el-col>
                <!--选择天数-->
                <el-col :span="12" class="右侧">
                  <el-select v-model="defaultOption" placeholder="">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-tabs type="border-card" v-model="activeName_3" @tab-click="handleClick" >
                <!--折线图-->
                <el-tab-pane label="折线图" name="1">
                  <div id="main" style="width: 1000px; height:400px;"></div>
                </el-tab-pane>
                <!--列表-->
                <el-tab-pane label="列表" name="2">
                  <el-table
                      :data="dataTable"
                      style="width: 100%">
                    <el-table-column
                        prop="time"
                        label="时间">
                    </el-table-column>
                    <el-table-column
                        prop="show"
                        label="展现量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="read"
                        label="阅读量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="show_fans"
                        label="粉丝展现量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="read_fans"
                        label="粉丝阅读量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="like"
                        label="点赞量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        prop="comment"
                        label="评论量"
                        width="100"
                        fixed="right"
                        align="center">
                    </el-table-column>
                  </el-table>
                  <br/>
                  <!--分页-->
                  <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="total_data"
                      :current-page="current_data"
                      :page-size="pageSize_data"
                      @current-change="handleCurrentChange">
                  </el-pagination>
                </el-tab-pane>
              </el-tabs>

              <el-row :gutter="16" type="flex" justify="center">
                <!--性别分布-->
                <el-col :span="12">
                  <div class="文本框-灰色">
                    <div class="文本-中">性别分布</div>
                    <div id="main2" style="width: 450px; height:300px; align-content: center"></div>
                  </div>
                </el-col>
                <!--年龄分布-->
                <el-col :span="12">
                  <div class="文本框-灰色">
                    <div class="文本-中">年龄分布</div>
                    <div id="main3" style="width: 450px; height:300px; align-content: center"></div>
                  </div>
                </el-col>
              </el-row>
              <!--地域分布-->
              <div class="文本框-灰色-无间距">
              </div>

            </el-tab-pane>
            <!--单篇数据-->
            <el-tab-pane>
              <span slot="label" style="font-size: 18px">单篇</span>
              <!--选择数据类型-->
              <el-row>
                <el-col :span="12">
                  <el-tabs v-model="activeName_2" @tab-click="handleClick" class="deleteBorder">
                    <el-tab-pane label="全部" name="1"></el-tab-pane>
                    <el-tab-pane label="文章" name="second"></el-tab-pane>
                    <el-tab-pane label="视频" name="third"></el-tab-pane>
                    <el-tab-pane label="富微条" name="forth"></el-tab-pane>
                  </el-tabs>
                </el-col>
                <el-col :span="12">
                  <div class="文本 右侧" style="padding-top: 9px;">
                    每日14点前更新前一日数据
                  </div>
                </el-col>
              </el-row>
              共{{file_num}}条内容
              <!--表格-->
              <el-table
                  :data="fileTable"
                  style="width: 100%">
                <el-table-column
                    label="作品"
                    width="300">
                  <template slot-scope="scope">
                    <el-row>
                      <el-col :span="5">
                        <div class="block"><el-avatar shape="square" :size="45" :src="scope.row.url"></el-avatar></div>
                      </el-col>
                      <el-col :span="19">
                        <div class="文本-小">
                          {{scope.row.name}}
                        </div>
                        <div class="文本-小">
                          {{scope.row.time}}
                        </div>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="show"
                    label="展现量"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="play"
                    label="播放量"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="rate"
                    label="点击率"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="long"
                    label="播放时长"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="like"
                    label="点赞量"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="comment"
                    label="评论量"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="profit"
                    label="收益"
                    width="80"
                    fixed="right"
                    align="center">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="80"
                    fixed="right"
                    align="center">
                  查看详情
                </el-table-column>
              </el-table>
              <br/>
              <!--分页-->
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="current"
                  :page-size="pageSize"
                  @current-change="handleCurrentChange">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <!--页脚-->
    <div class="页眉"></div>
  </div>
</template>

<style>
.el-tabs--border-card{
  box-shadow: none;
}

.deleteBorder .el-tabs__nav-wrap::after{
  height: 0;
}
/*去掉el-tab-pane切换时的蓝色下划线*/
.deleteBorder .el-tabs__active-bar{
  background: transparent;
}
</style>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    //核心数据
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['展现量', '播放量', '粉丝展现量', '粉丝播放量', '点赞量', '评论量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '展现量',
          type: 'line',
          stack: '1',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '播放量',
          type: 'line',
          stack: '2',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '粉丝展现量',
          type: 'line',
          stack: '3',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '粉丝播放量',
          type: 'line',
          stack: '4',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '点赞量',
          type: 'line',
          stack: '5',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        {
          name: '评论量',
          type: 'line',
          stack: '6',
          data: [720, 732, 501, 234, 290, 654, 888]
        }
      ]
    };
    option && myChart.setOption(option);


    //性别分布
    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          data: [
            {value: 1048, name: '男性'},
            {value: 735, name: '女性'}
          ]
        }
      ]
    };

    option2 && myChart2.setOption(option2);

    //年龄分布
    var chartDom3 = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    };
    option3 && myChart3.setOption(option3);
  },
  data() {
    return {
      //选择天数
      options: [{
        value: '001',
        label: '7天'
      }, {
        value: '002',
        label: '30天'
      }],
      //默认选择天数
      defaultOption: '001',
      //三个标签页分别的默认选项
      activeName: '0',
      activeName_2: '1',
      activeName_3: '1',
      //头像
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      tabPosition: 'left',
      //单篇作品分页相关变量，分页和表格目前还没有任何关系，不要把它们搞混
      //总项目数
      total: 100,
      //每一页显示多少项目
      pageSize: 10,
      //当前页数
      current: 3,
      //和上面的一样，只不过是整体数据--流量分析--列表中的
      total_data: 100,
      pageSize_data: 10,
      current_data: 3,
      //整体数据--流量分析--列表
      dataTable: [{
        time: '2020/2/28',
        show: '1',
        read: '1',
        show_fans: '1',
        read_fans: '1',
        like: '1',
        comment: '1'
      },{
        time: '2020/2/28',
        show: '1',
        read: '1',
        show_fans: '1',
        read_fans: '1',
        like: '1',
        comment: '1'
      },{
          time: '2020/2/28',
          show: '1',
          read: '1',
          show_fans: '1',
          read_fans: '1',
          like: '1',
          comment: '1'
        }],
      //单篇作品 “共XX条内容处”的XX
      file_num :4,
      //单篇作品表格内容
      fileTable: [{
        name: 'GTA5佩里克岛抢劫单人攻略',
        show: '90000',
        play: '111',
        rate: '111',
        long: '111',
        like: '111',
        comment: '111',
        profit: '111',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '地平线4登录steam',
        show: '111',
        play: '111',
        rate: '111',
        long: '111',
        like: '111',
        comment: '111',
        profit: '111',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '文章',
        show: '111',
        play: '111',
        rate: '111',
        long: '111',
        like: '111',
        comment: '111',
        profit: '111',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }, {
        name: '文章',
        show: '111',
        play: '111',
        rate: '111',
        long: '111',
        like: '111',
        comment: '111',
        profit: '111',
        url: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        time: '2021/2/31'
      }]
    }
  },
  methods: {
    handleCurrentChange(newPage){
      console.log(newPage)
      this.current=newPage
    }
  }
};
</script>